<template>
  <div class="fillcontain">
    <el-form :inline="true" size="small">
      <el-form-item label="分类代码或名称">
        <el-input v-model="searchForm.name" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button-group>
          <el-button size="mini" type="primary" @click="toSearch">查询</el-button>
          <el-button size="mini" type="success" @click="addThemeFlag=true">添加</el-button>
        </el-button-group>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      border
      highlight-current-row
      header-cell-class-name="table-header-class"
      style="width:100%"
      v-loading="loading"
    >
      <el-table-column prop="code" label="代码" align="center"></el-table-column>
      <el-table-column prop="name" label="名称" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button-group>
            <el-button size="mini" type="success" @click="toEdit(scope.row.id)">编辑</el-button>
            <el-button size="mini" type="danger" @click="toDelete(scope.row.id)">删除</el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <el-row class="pagination">
      <el-pagination
        background
        layout="total, prev, pager, next, jumper, sizes"
        :page-size="page.pageSize"
        :page-sizes="[2,5,10,20,50,100]"
        :total="page.total"
        @current-change="pageChange"
        @size-change="sizeChange"
      ></el-pagination>
    </el-row>

    <!-- 添加分类 -->
    <el-dialog
      title="添加分类"
      :append-to-body="true"
      :visible.sync="addThemeFlag"
      width="500px"
    >
      <add-theme
        :addThemeFlag="addThemeFlag"
        @changeAddThemeFlag="changeAddThemeFlag"
      ></add-theme>
    </el-dialog>

    <!-- 编辑分类 -->
    <el-dialog
      title="编辑分类"
      :append-to-body="true"
      :visible.sync="editThemeFlag"
      width="500px"
    >
      <edit-theme
        :editThemeFlag="editThemeFlag"
        :editId="editId"
        @changeEditThemeFlag="changeEditThemeFlag"
      ></edit-theme>
    </el-dialog>
  </div>
</template>

<script>
import * as themeApi from "@/api/themeApi";
import addTheme from "./addTheme";
import editTheme from "./editTheme";
export default {
  data() {
    return {
      page: {
        page: 1,
        pageSize: 10,
        total: 1
      },
      loading: false,
      addThemeFlag: false,
      editThemeFlag: false,
      editId: Number,
      tableData: [],
      searchForm: {}
    };
  },
  components: {
    addTheme,
    editTheme
  },
  mounted() {
    this.getThemeList();
  },
  methods: {
    getThemeList() {
      return new Promise((resolve, reject) => {
        let requestData = Object.assign({}, this.page, this.searchForm);
        this.loading = true;
        themeApi
          .getThemeList(requestData)
          .then(res => {
            if (res.errorCode == 0) {
              this.page.total = res.totalCount;
              this.tableData = res.data;
            }
            resolve();
          })
          .finally(() => {
            this.loading = false;
          });
      });
    },
    pageChange(page) {
      this.page.page = page;
      this.getThemeList();
    },
    sizeChange(size) {
      this.page.pageSize = size;
      this.getThemeList();
    },
    changeAddThemeFlag(value) {
      this.addThemeFlag = value;
      this.getThemeList();
    },
    changeEditThemeFlag(value) {
      this.editThemeFlag = value;
      this.getThemeList();
    },
    toSearch() {
      this.page.page = 1;
      this.getThemeList();
    },
    toEdit(id) {
      this.editId = id;
      this.editThemeFlag = true;
    },
    toDelete(id) {
      this.$confirm("是否删除该分类?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          themeApi.deleteTheme({ id }).then(res => {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.getThemeList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>

<style lang="less" scope>
.fillcontain {
  height: calc(100vh - 180px);
  padding: 30px;
  overflow: auto;
  .pagination {
    margin-top: 10px;
    text-align: right;
  }
}
</style>
